<template>
  <div class="app-container ">
    <a-row :gutter="10">
      <a-col :span="12">
        <div class="lookMoreTitle">
          <p>排班列表</p>
          <h4 class="">
            <a-button type="primary" icon="plus" @click="addScheduling">
              添加班次
            </a-button>
          </h4>
        </div>
        <div class="bg">
          <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
            :rowKey="
              (record, index) => {
                return index;
              }
            "
          >
            <a slot="shiftName" slot-scope="text" class="colorin" style="font-weight: bold">{{ text }}</a>

            <a slot="shifttime" slot-scope="text, record" class="colorin" style="font-weight: bold">
              {{ record.startTime }}-{{ record.endTime }}
            </a>

            <template slot="oper" slot-scope="text, record, index">
              <a-popconfirm @confirm="() => onDelete(index)">
                <a-button icon="delete" />
              </a-popconfirm>
            </template>
          </a-table>
          <!--          <div style="padding: 20px">-->
          <!--            <a-pagination size="small" :total="total" :show-total="total => `一共 ${total} 页`" show-quick-jumper-->
          <!--                          @change="changepage" />-->
          <!--          </div>-->
        </div>
      </a-col>
    </a-row>
    <a-modal
      title="添加班次"
      :visible="addvisible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <div v-for="(shifts, index) in forms.shifts" :key="index" style="margin-bottom: 10px" class="shiftsli">
          <p v-if="index !== 0" @click="detalfrom(index)">
            <a-icon type="close-circle" style="color: red" class="iconcancle" />
          </p>

          <h3>{{ SimplifiedChinese(index * 1 + 1) }}</h3>
          <a-form-item label="开始时间" size="small">
            <mtimePicke v-model="shifts.startTime" :defaulttime="shifts.startTime" />
          </a-form-item>
          <a-form-item label="结束时间">
            <mtimePicke v-model="shifts.endTime" :defaulttime="shifts.endTime" />
          </a-form-item>
        </div>
        <a-button type="primary" icon="plus" @click="addSchedullist" size="small">
          添加
        </a-button>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
//
const columns = [
  {
    title: '班次',
    dataIndex: 'shiftName',
    scopedSlots: { customRender: 'shiftName' },
  },
  {
    title: '上班时间',
    dataIndex: 'shifttime',
    scopedSlots: { customRender: 'shifttime' },
  },

  {
    title: '操作',
    dataIndex: 'oper',
    scopedSlots: { customRender: 'oper' },
  },
];

import api from '@/api/equipment';
import mtimePicke from '@components/mtimePicke/index.vue';
import { Arabia_To_SimplifiedChinese } from '../../unit/tool';
import moment from 'moment';

export default {
  components: {
    mtimePicke,
  },
  data() {
    return {
      data: [],
      columns,
      dateType: 1,
      Params: {},
      addvisible: false,
      ModalText: 'Content of the modal',
      confirmLoading: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      moment: moment,
      forms: {
        shifts: [],
      },
      total: 0,
    };
  },
  created() {
    let roleId = localStorage.getItem('roleId');
    if (roleId == 1) {
      this.forms.companyId = localStorage.getItem('compid');
    } else {
      this.forms.companyId = localStorage.getItem('choseCompanyId');
    }
    this.getAllShift();
  },
  methods: {
    detalfrom(index) {
      this.forms.shifts.splice(index, 1);
    },
    SimplifiedChinese(val) {
      let result = Arabia_To_SimplifiedChinese(val);
      return result;
    },
    addSchedullist() {
      this.forms.shifts.push({ startTime: '00:00:00', endTime: '00:00:00' });
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.addShift();
      //
      // this.confirmLoading = false;
    },
    async addShift() {
      this.forms.shifts.forEach((item, index) => {
        if (item.startTime === item.endTime) {
          this.$message.error('当前班次开始时间必须小于结束时间');
          this.confirmLoading = false;
          throw SyntaxError();
        } else {
          item.shiftName = this.SimplifiedChinese(index * 1 + 1);
        }
      });
      const res = await api.addShift(this.forms);

      this.confirmLoading = false;
      if (res.msgCode !== 0) {
        this.$message.error(res.msgDesc);
        return;
      }
      this.getAllShift();
      this.addvisible = false;
    },
    handleCancel(e) {
      this.addvisible = false;
    },
    addScheduling() {
      this.addvisible = true;
    },
    getAllShift() {
      api.getAllShift({ companyId: this.forms.companyId }).then((res) => {
        this.data = res.data;
        this.forms.shifts = [];
        if (this.data.length > 0) {
          this.forms.shifts = this.forms.shifts.concat(this.data);
        } else {
          this.forms.shifts.push({ startTime: '00:00:00', endTime: '00:00:00' });
        }
      });
    },
    changepage(page, size) {
      this.Params.pageNum = page;
      this.getAllShift();
    },
    changedate(i) {
      this.dateType = i;
    },
    onDelete(index) {
      this.forms.shifts.splice(index, 1);
      this.addShift();
    },
    handleSubmit() {},
  },
};
</script>

<style scoped lang="less">
@import 'index.less';
</style>
